<template>
  <div class="home">
    <div class="navs">
      <div class="moans">
        <nabas :datas="tabas"></nabas>
      </div>
    </div>

    <div class="mps">
         <keep-alive>
      <router-view></router-view>
          </keep-alive>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import nabas from "../components/nabas.vue";
import API from "../http/API";
export default {
  name: "Home",
  components: {
    nabas,
  },
  data() {
    return {
      tabas: [
        {
          titlie: "个性推荐",
          to: "/home/recommendation",
        },
        {
          titlie: "专属定制",
          to: "/home/exclusivecustomization",
        },
        {
          titlie: "歌单",
          to: "/home/songlist",
        },
        {
          titlie: "排行榜",
          to: "/home/rankinglist",
        },
        {
          titlie: "歌手",
          to: "/home/singer",
        },
        {
          titlie: "最新音乐",
          to: "/home/newest",
        },
      ],
    };
  },
  created() {
    // console.log("1");
    this.http();
  },
  methods: {
    http() {
      this.$get(API.PLAYLIST_CATLIST, {}).then((res) => {
        // console.log(res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .navs {
    height: 70px;
    // border: 1px solid #000;
    width: 90%;
    // margin-left: 10px;
    background-color: #ffffff;
    position: fixed;
    z-index: 5;
    top: 60px;
    left: 218px;
    .moans {
      position: absolute;
      bottom: 0;
    }
  }
  .mps{
      margin-top: 20px;
  margin-right: 30px;
  margin-left: 20px;
  }
}
</style>